<template>
  <bottomChartContent title="月计划完成情况">
    <div id="monthPlanContainer"></div>
  </bottomChartContent>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import bottomChartContent from "../baseComponent/bottomChartContent.vue";
import * as echarts from "echarts";
import { planData } from "@/request/product";

let monthPlanChart = null;
const axisStyle = {
  axisLabel: {
    color: "#fff",
    fontSize: 24,
    interval: 1
  },
};
const serieLineOption = {
  type: "line",
  smooth: true,
  lineStyle: {
    width: 5,
  },
};

const createLine = (finishData, monthData, targetData, markLine, lineDom) => {
  monthPlanChart = echarts.init(lineDom);
  let options = {
    color: ["#2499F8", "#FE9901"],
    tooltip: {
      trigger: "axis",
      formatter: (data) => {
        let month = data[0].axisValue
        let target = data[0].value
        let finish = data[1].value
        let ratio = finish / target * 100
        return month + '完成率：'+ ratio.toFixed(0) + '%'
      },
      textStyle: {
        fontSize: 26
      }
    },
    grid: {
      left: "13%",
      bottom: "34%",
      top: "20%",
    },
    legend: {
      top: 10,
      textStyle: {
        color: "#fff",
        fontSize: 24,
      },
    },
    xAxis: {
      ...axisStyle,
      type: "category",
      data: monthData,
    },
    yAxis: {
      ...axisStyle,
      splitLine: {
        lineStyle: {
          width: 4,
          color: "#164271",
        },
      },
    },
    series: [
      {
        ...serieLineOption,
        name: "计划生产",
        data: targetData,
      },
      {
        ...serieLineOption,
        name: "实际生产",
        data: finishData,
      },
      ...markLine
    ],
  };
  monthPlanChart.setOption(options);
};
onMounted(async () => {
  let {
    data: { data: planDataRes },
  } = await planData();
  let finishData = [],
    monthData = [],
    targetData = [],
    markLine = []
  planDataRes.map((item) => {
    finishData.push(item.finish);
    monthData.push(item.month);
    targetData.push(item.target);
    markLine.push({
      type: 'line',
      lineStyle: {
        color: '#4F6C8E',
        width: 5,
      },
      data: [[item.month, item.target], [item.month, item.finish]]
    })
  });
  createLine(
    finishData,
    monthData,
    targetData,
    markLine,
    document.getElementById("monthPlanContainer")
  );
});
onUnmounted(() => {
  echarts.dispose(monthPlanChart);
  monthPlanChart = null;
});
</script>

<style lang="less" scoped>
#monthPlanContainer {
  width: 100%;
  height: 100%;
}
</style>
